<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>中央事件总线</title>
    </head>
    <body>

        <h3>vue@3.2.31.js</h3>

        <div id="root">
            <first></first>
            <hr>
            <second></second>
        </div>

        <script src="../scripts/vue@3.2.31.js"></script>

        <script src="../scripts/mitt.umd.js"></script>

        <script>
            // 采用 mitt 函数返回的对象充当中央事件总线
            const emitter = mitt(); // 即充当媒婆
            console.log( emitter );

            const First = {
                template: `<button @click="handler">点我试试</button>`,
                methods: {
                    handler(){
                        // 通过中央事件总线来触发事件
                        emitter.emit( '试试就试试' , { name: '张翠山' } );
                    }
                }
            }

            const Second = {
                template: `<p>{{ name }}</p>`,
                data(){
                    return { name: '你猜' }
                },
                methods: {
                    handleName(payload){
                        console.log( payload );
                        this.name = payload.name ;
                    }
                },
                mounted(){
                    // 通过中央事件总线来监听事件
                    emitter.on( '试试就试试' , this.handleName )
                }
            }

            const options = {
                components: {
                    'first': First,
                    'second': Second
                }
            }

            const app = Vue.createApp(options);
            const root = app.mount('#root');
            console.log( root );
        </script>
        
    </body>
</html>